<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../CODE/999.exercise/css/reset.css">

    <style>
        /* 
        calc()函数：
        calc() 函数用于动态计算长度值。
        需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
        任何长度值都可以使用calc()函数进行计算；
        calc()函数支持 "+", "-", "*", "/" 运算；
        calc()函数使用标准的数学运算优先级规则；
        */
        .div1 {
            position: absolute;
            left: 50px;
            width: calc(100% - 100px);
            border: 1px solid black;
            background-color: yellow;
            padding: 5px;
            text-align: center;
        }

        input {
            padding: 2px;
            display: block;
            /* 使输入框的大小跟随外框大小改变 */
            width: calc(100% - 1em);
        }

        #formbox {
            width: calc(100% / 6);
            border: 1px solid black;
            padding: 4px;
        }

        /*         
        hsla() 函数使用色相、饱和度、亮度、透明度来定义颜色。
        色相（H）是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等。
        饱和度（S）是指色彩的纯度，越高色彩越纯，低则逐渐变灰，取 0-100% 的数值。
        亮度（L） 取 0-100%，增加亮度，颜色会向白色变化；减少亮度，颜色会向黑色变化。
        透明度（A） 取值 0~1 之间， 代表透明度。
        */

        #p1 {
            background-color: hsla(120, 100%, 50%, 0.3);
        }

        #p2 {
            background-color: hsla(120, 100%, 75%, 0.3);
        }

        #p3 {
            background-color: hsla(120, 100%, 25%, 0.3);
        }

        #p4 {
            background-color: hsla(120, 60%, 70%, 0.3);
        }

        #p5 {
            background-color: hsla(290, 100%, 50%, 0.3);
        }

        #p6 {
            background-color: hsla(290, 60%, 70%, 0.3);
        }
    </style>


</head>

<body>
    <!-- 一个随视口改变大小的块元素 -->
    <div class="div1"></div>

    <!-- 一个随视口改变大小的表单 -->
    <form>
        <div id="formbox">
            <label>Type something:</label>
            <input type="text">
        </div>
    </form>


    <p>HSL 颜色，并使用透明度:</p>
    <p id="p1">绿色</p>
    <p id="p2">浅绿</p>
    <p id="p3">暗绿</p>
    <p id="p4">柔和的绿色</p>
    <p id="p5">紫色</p>
    <p id="p6">柔和的紫色</p>
</body>

</html>